<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="referrer" content="never">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<script>
  (function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // 初始化设置body字体大小
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
      } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
    }
    setBodyFontSize();

    // 设置1rem = clientWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth <= 768 ? docEl.clientWidth / 10 : 76.8; // 最大宽度设置768，ipad尺寸
      docEl.style.fontSize = rem + "px";
    }
    setRemUnit();

    // 监听页面变化的时候，设置根元素字体大小
    window.addEventListener("resize", setRemUnit);
    // 监听页面显示设置根元素字体大小
    window.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
  })(window, document);

</script>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>
